<template>
  <div class="container">
    <global-header :user="userInfo"></global-header>
    <column-list :list="testData"></column-list>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'

import ColumnList, { ColumnProps } from './ColumnList.vue'
import GlobalHeader, { UserProps } from './GlobalHeader.vue'

const testData: ColumnProps[] = [
  {
    id: 1,
    title: 'test1专栏',
    description: '这是test1的专栏，有一段非常有意思的简介',
    avatar: 'https://ftp.bmp.ovh/imgs/2021/06/f91dd2e6a8de6431_thumb.jpg'
  },
  {
    id: 2,
    title: 'test2专栏',
    description: '这是test2的专栏，有一段非常有意思的简介',
    avatar: 'https://ftp.bmp.ovh/imgs/2021/06/50b997f2b24a528d_thumb.jpeg'
  }, {
    id: 3,
    title: 'test3专栏',
    description: '这是test3的专栏，有一段非常有意思的简介'
    // avatar: 'https://ftp.bmp.ovh/imgs/2021/06/06da2e065b78a308_thumb.png'
  }
]
const userInfo: UserProps = {
  id: '2',
  userName: 'Hello',
  isLogin: true
}

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    ColumnList,
    GlobalHeader
  },
  setup (props) {
    return {
      testData,
      userInfo
    }
  }

})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
